<template>
  <div class="fei_lei">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">{{biao_ti}}</div>
    </div>
    <div class="sai_suan">
      <ul>
        <li @click="zongHe()">
          <span :class="{yanSe:flag==null}">默认</span>
        </li>
        <li class="gg_yangs" @click="xiaoLiang()">
          <span :class="{yanSe:flag==false}">销量</span>
          <div v-show="flag==false">
            <span :class="{yanSe:flag1==true}">▲</span>
            <span :class="{yanSe:flag1==false}">▼</span>
          </div>
        </li>
        <li class="gg_yangs" @click="jiaGe()">
          <span :class="{yanSe:flag==true}">价格</span>
          <div v-show="flag==true">
            <span :class="{yanSe:flag2==true}">▲</span>
            <span :class="{yanSe:flag2==false}">▼</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="sc_lh">
      <ul class="lh_sp">
        <li v-for="(item,index) in shoping" :key="index">
          <router-link to="/Gdetails" @click.native="fa_song(index)">
            <div class="lh_img">
              <img :src="item.img" alt="" />
            </div>
            <div class="lh_title">
              <p>{{item.title}}</p>
              <div class="lh_tprice">
                <del v-if="item.title1!=''">￥{{item.title1}}</del>
                <ins :class="{ztYan:item.title1==''}">￥{{item.title2}}</ins>
              </div>
            </div>
            <div class="xiao_l">
              <span>销量：{{item.title3}}</span>
              <span class="iconfont icon-gouwuchecopy"></span>
            </div>  
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import bus from '@/bus.js';
export default {
  data(){
    return {
      obj:'',
      biao_ti:'',
      shoping:'',
      flag:null,
      // 销量
      flag1:false,
      // 价格
      flag2:false,
    }
  },
  methods:{
    fa_song(index){
      localStorage.setItem('xqXx',JSON.stringify(this.shoping[index]));
    },
    fanHui(){
      window.history.go(-1)
    },
    zongHe(){
      this.obj=JSON.parse(localStorage.getItem('every1'));
      this.shoping=this.obj[0].shang_ping
      this.flag=null;
    },
    xiaoLiang(){
      this.flag=false;
      this.flag1=!this.flag1
      if(this.flag1){
        this.shoping.sort(function(a,b){
          return a.title3-b.title3
        })
      }else{
        this.shoping.sort(function(a,b){
          return b.title3-a.title3
        })
      }
    },
    jiaGe(){
      this.flag=true;
      this.flag2=!this.flag2
      if(this.flag2){
        this.shoping.sort(function(a,b){
          return a.title2-b.title2
        })
      }else{
        this.shoping.sort(function(a,b){
          return b.title2-a.title2
        })
      }
    },
    diaoYong(){
      this.obj=JSON.parse(localStorage.getItem('every1'));
      this.biao_ti=this.obj[0].biao_ti;
      this.shoping=this.obj[0].shang_ping;
    }
  },
  mounted(){
    setTimeout(()=>{
      this.diaoYong()
    },50)
  }
  
};
</script>

<style lang="less" scoped>
.ztYan{
      color:#000 !important;
    }
.fei_lei{
  .sai_suan{
    background: #ffffff;
    margin-top: 0.133333rem;
    width: 100%;
    margin-top: 45px;
    .yanSe{
      color: #de0a2b !important;
    }
    ul{
      height: 1.04rem;
      display: flex;
      flex-flow: row;
      align-items: center;
      li{
        height: 100%;
        width: 20%;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .gg_yangs{
        >div{
          line-height: 10px;
          height: 100%;
          margin-left: 0.133333rem;
          display: flex;
          justify-content: center;
          flex-flow: column;
          span{
            display: block;
            font-size: 0.266667rem;
          }
        }
      }
    }
  }
  .sc_lh {
        margin-bottom: 50px;
    background: #ffffff;
    padding: 0.266667rem 0.266667rem;
    width: 100%;
    .lh_sp {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      li {
        width: 48%;
        margin-bottom: 0.133333rem;
        a {
          display: block;
          .lh_img {
            padding: 0.186667rem;
            img {
              width: 100%;
            }
          }
          .lh_title {
            > p {
              font-size: 14px;
              padding-right: 0.4rem;
              color: #353535;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
              margin-bottom: 0.133333rem;
            }
            .lh_tprice {
              font-size: 14px;
              del {
                color: #a9a9a9;
                margin-right: 0.133333rem;
              }
              ins {
                color: #de0a2b;
                text-decoration: none;
              }
            }
          }
          .xiao_l{
            font-size: 14px;
            display: flex;
            flex-flow: row;
            justify-content: space-between;
            align-items: center;
            :first-child{
              color: #de0a2b;
            }
            :last-child{
              color: #999;
            }
          }
        }
      }
    }
  }
}
</style>